<template>
  <div class="container">
    <div class="block">
      <el-row :gutter="5">
        <el-col :span="6"><el-input v-model="input" placeholder="用户名" class="input" /></el-col>
        <el-col :span="14">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
        <el-col :span="4"><el-button type="primary" icon="el-icon-search" class="search">搜索</el-button></el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="date"
        label="业务条线"
      />
      <el-table-column
        prop="name"
        label="资料类型"
      />
      <el-table-column
        prop="address"
        label="借款人"
      />
      <el-table-column
        prop="address"
        label="移交人"
      />
      <el-table-column
        prop="address"
        label="接交人"
      />
      <el-table-column
        prop="address"
        label="交接时间"
      />
      <el-table-column
        prop="address"
        label="备注"
      />
    </el-table>
  </div>

</template>
<script>
export default {
  data() {
    return {
      value1: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
    padding: 0 20px 0 20px;
}
.block{
    margin: 10px 0 30px 0;
}
.input{
    margin-right: 10px;
}
.el-range-editor.el-input__inner{
    width: 100%;
}
</style>
